<template>
  <div id="Preview-choice">
    <el-dialog
      title="题目预览"
      :visible="previewArticle"
      width="50%"
      @close="previewArticle1"
    >
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">【题型】: {{
          preview.questionType|tx
        }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【编号】：{{ preview.id }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{ preview.difficulty|nd }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【标签】：{{ preview.tags }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{ preview.subjectName }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【目录】：{{ preview.directoryName }}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{ preview.direction }}</div></el-col>
      </el-row>
      <hr>
      【题干】：<div v-html="preview.question" />

      <div>{{ preview.questionType|tx }} 选项: (以下选中的选项为正确答案)</div>
      <div v-for="item in preview.options" :key="item.code" style="padding:8px 0">
        <el-radio v-if="preview.questionType==='1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
        <el-checkbox v-if="preview.questionType==='2'" :value="item.isRight?true:false">{{ item.title }}</el-checkbox>
      </div>
      <hr>
      【参考答案】：<el-button type="danger" size="small" @click="videoAnswer">视频答案预览</el-button>
      <div v-show="yin" class="video">
        <video ref="video" :src="preview.videoURL" controls />
      </div>
      <hr>
      【答案解析】：<div style="display:inline-block" v-html="preview.answer" />
      <hr>
      【题目备注】：<div style="display:inline-block" v-html="preview.remarks" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewArticle1">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'PreviewChoice',

  filters: {
    tx(value) {
      if (value) return questionType.find(item => item.value + '' === value).label + '题'
    },
    nd(value) {
      if (value) return difficulty.find(item => item.value + '' === value).label
    }
  },
  props: {
    previewArticle: {
      type: Boolean,
      default: false
    },
    preview: {
      type: Object,
      required: true
    }

  },
  data() {
    return {
      yin: false,
      questionType,
      difficulty
    }
  },
  methods: {
    //   视频点击按钮
    videoAnswer() {
      this.yin = !this.yin ? this.$refs.video.play() : this.$refs.video.pause()
    },
    //  对话框布尔
    async  previewArticle1() {
      this.$emit('update:previewArticle', false)
      this.$refs.video.pause()
    }
  }
}
</script>

<style lang='scss' scoped>
   .video{

       width: 200px;
       height: 200px;
       video{
           width: 100%;
           height: 100%;
       }
   }
</style>
